<template>
  <div id="questionnaire-answer" v-if="Object.keys(questionnaire).length">
    <div class="main-container container-fluid container-limited page-holder clear">
      <div class="questionnaire-paper paper-card">
        <div class="questionnaire-content">
          <el-input class="title" readonly v-model="questionnaire.title" placeholder="编辑问卷标题"/>
          <el-input v-if="questionnaire.desc" v-model="questionnaire.desc"
                    readonly type="textarea" :rows="1" autosize
                    class="desc m-t-24" placeholder="添加问卷说明"/>
          <Questions class="m-t-24" :questions="questionnaire.questions"
                     :editable="false" :answering="true"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Questions from './Questions';
import * as format from './format';

export default {
  name: 'QuestionnaireAnswer', // 回答问卷
  components: { Questions },
  data() {
    return {
      questionnaire: {},
    };
  },
  computed: {
    qnId() { return this.$route.query.qn_key; },
  },
  methods: {
    // 获取问卷数据
    loadQuestionnaire() {
      this.$api.questionnaires.answerShow({ qnId: this.qnId })
        .then(res => this.$set(this, 'questionnaire', format.formatQuestionnaire(res.data)))
        .catch((err) => { if (err) this.goBack(); });
    },
  },
  created() { this.loadQuestionnaire(); },
  watch: {
    qnId() {
      this.$set(this, 'questionnaire', {});
      this.loadQuestionnaire();
    },
  },
};
</script>

<style></style>
